<h1>引入图片</h1>
<img src="assets/images/01.png" alt="收藏" />


<img [src]="picUrl" alt="链接图片"/>


<hr>
<h1>循环数据，显示数据的索引</h1>

<ul>
    <li *ngFor="let item of list;let key = index">
        <span *ngIf="key==1" class="red">{{key}}---{{item.title}}</span>
        <span *ngIf="key!=1">{{key}}---{{item.title}}</span>
    </li>
</ul>

<ul>
    <li *ngFor="let item of list;let key = index">
        {{key}}---{{item.title}}
    </li>
</ul>

<hr color="red">

<h1>条件判断语句 *ngIf</h1>

<div *ngIf="flag">
    <img src="assets/images/02.png">
</div>

<div *ngIf="!flag">
    <img src="assets/images/01.png">
</div>



<h1>条件判断语句 *ngSwitch</h1>

<span [ngSwitch]="orderStatus">
    <p *ngSwitchCase="1">
        表示已支付
    </p>
    <p *ngSwitchCase="2">
        表示支付并且确认订单
    </p>
    <p *ngSwitchCase="3">
        表示已经发货
    </p>
    <p *ngSwitchCase="4">
        表示已经收货
    </p>
    <p *ngSwitchDefault>
        表示无效
    </p>
</span>


<h1>属性[ngClass]、[ngStyle]</h1>

<div class="red">
    ngClass演示 （尽量不要用dom来改变class)
</div>

<div [ngClass]="{'blue':true,'red':false}">
    ngClass演示
</div>

<div [ngClass]="{'blue':flag,'red':!flag}">
    ngClass演示
</div>


<strong>循环数组，让第一个元素样式为红色，第二个为蓝色，第三个为绿色</strong>

<ul>
    <li *ngFor="let item of list;let key = index" [ngClass]="{'red':key==0,'blue':key==1,'green':key==2}">
        {{key}}---{{item.title}}
    </li>
</ul>


<hr>

<p style="color:red;">我是一个p标签</p>

<p [ngStyle]="{'color':'red'}">我是一个p标签</p>


<p [ngStyle]="{'color':attr}">我是一个p标签</p>


<h1>管道</h1>

{{today | date:'yyyy-MM-dd HH:mm ss'}}



<h1>事件</h1>

    <Strong>{{title}}</Strong>
    <button (click)="run()">执行事件</button>

    <button (click)="getData()">执行方法获取数据</button>

    <button (click)="changeData()">执行方法改变数据</button>

    
    

    <h1>表单事件、事件对象</h1>

    <input type="text" (keydown)="keyDown($event)"/>
    <br>
    <input type="text" (keyup)="keyUp($event)"/>
    
    <br>

    <button (click)="getEvent($event)">获取事件对象</button>


    <h1>双向数据绑定---MVVM 指示针对表单</h1>

    <input type="text" [(ngModel)]='keywords'/>
    {{keywords}}

    <br>
    <button (click)="changekeywords()">改变kewords的值</button>
    <br>
    <button (click)="getkeywords()">获取keywords的值</button>
    